<template>
  <div>
    <el-row :gutter="20" class="house">
      <el-col :offset="1" :span="4">
        <el-card>
          <div slot="header" class="title">
            <span @click="getTable">智慧小区</span>
            <el-button
              icon="el-icon-plus"
              circle
              @click="dialogFormVisible = true"
            />
          </div>
          <Tree :building="building" @increment="getTable" />
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card>
          <List />
        </el-card>
      </el-col>

      <el-dialog
        title="添加房屋"
        :visible.sync="dialogFormVisible"
        class="add-box"
      >
        <el-form ref="houseForm" :model="form" :rules="rules">
          <el-form-item
            label="楼栋号"
            prop="building"
            :label-width="formLabelWidth"
          >
            <el-input v-model="form.building" />
          </el-form-item>
          <el-form-item
            label="房间号"
            prop="room"
            :label-width="formLabelWidth"
          >
            <el-input v-model="form.room" />
          </el-form-item>
          <el-form-item
            label="业主身份证号"
            prop="card"
            :label-width="formLabelWidth"
          >
            <el-input v-model="form.card" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addHouse">确 定</el-button>
        </div>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
import Tree from './components/tree'
import List from './components/list'
export default {
  name: 'House',
  components: {
    Tree,
    List
  },
  data() {
    return {
      checkHouse: {},
      dialogFormVisible: false,
      form: {
        building: '1号楼',
        room: '',
        card: ''
      },
      formLabelWidth: '120px',
      rules: {
        building: [
          { required: true, message: '请输入楼栋号', trigger: 'blur' }
        ],
        room: [{ required: true, message: '请输入房屋号', trigger: 'blur' }]
      }
    }
  },
  computed: {
    building() {
      return this.$store.state.house.allBuilding
    },
    listQuery() {
      return this.$store.state.house.listQuery
    }
  },
  async mounted() {
    this.$store.dispatch('house/getAll')
    this.$store.dispatch('house/getHouse')
  },
  methods: {
    getTable(data) {
      let filter = {}
      if (data.children) {
        filter = { building: data.label }
      } else if (data._id) {
        filter = { _id: data._id }
      } else {
        filter = {}
      }
      const obj = Object.assign({}, this.listQuery, { data: filter })
      this.$store.commit('house/SET_LISTQUERY', obj)
      this.$store.dispatch('house/getHouse')
    },
    addHouse() {
      console.log(this.form)
      this.$refs.houseForm.validate((valid) => {
        if (valid) {
          this.$store.dispatch('house/addHouse', this.form).then((res) => {
            if (res.state) {
              this.form = {
                building: '1号楼',
                room: '',
                card: ''
              }
              this.$message({
                message: '添加房屋成功！',
                type: 'success'
              })
              this.$store.dispatch('house/getAll')
              this.$store.dispatch('house/getHouse')
              this.dialogFormVisible = false
            } else {
              this.$message.error('该房屋已存在，不能再次添加！')
            }
          })
          // this.dialogFormVisible = false;
        } else {
          console.log('error submit!!')
          // this.$refs.houseForm.resetFields();

          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.house {
  margin: 20px;
}
.title {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.add-box {
  margin: auto;
  width: 1000px;
}
</style>
